<template>
  <div class="sub-box-border body" v-loading="loading">
    <div class="left-align sub-title">个人信息</div>
    <el-divider></el-divider>
    <table>
      <tr>
        <td>昵称:</td>
        <td>
          <div class="table-interval box-standard">
            <el-input v-model="userNickname" placeholder="昵称" :disabled="isEdit"></el-input>
          </div>
        </td>
      </tr>
      <tr>
        <td>用户名:</td>
        <td>
          <div class="table-interval box-standard">
            <el-input v-model="userTelephone" placeholder="手机号" :disabled="isEdit"></el-input>
          </div>
        </td>
      </tr>
      <tr>
        <td>邮箱:</td>
        <td>
          <div class="table-interval box-standard">
            <el-input v-model="userEmail" placeholder="邮箱" :disabled="isEdit"></el-input>
          </div>
        </td>
      </tr>
      <tr>
        <td>权限:</td>
        <td>
          <div class="table-interval box-standard">
            <el-input v-model="authority" placeholder="权限" disabled>#{{authority}}</el-input>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="box-standard table-interval box-standard">
            <el-button type="primary" @click="edit">更新</el-button>
            <el-button type="primary" @click="reserve">保存</el-button>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
    export default {
      name: "Infomation",
      data(){
        return{
          loading: false,
          userId: '',
          userNickname: '',
          userTelephone: '',
          userEmail: '',
          authority: '',
          isEdit: true
        }
      },
      methods:{
        edit:function(){
          this.$data.isEdit = false;
        },
        reserve:function () {
          let data = this.$data;
          let qs = require("qs");
          this.axios.post('/user/update',qs.stringify(
              {
                userId:data.userId = resData.userId,
                userNickname:data.userNickname,
                userTelephone:data.userTelephone,
                userEmail:data.userEmail
              }
            ))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                resData = resData.data;
                this.$message({
                  message:resData.data,
                  type:"success"
                });
              }else{
                this.$message(resData.errMsg);
              }
            })
        }
      },
      created() {
        let data = this.$data;
        data.loading=true;
        setTimeout(() => {
          data.loading = false;
        }, 2000);
        this.axios.post('/user/getuser')
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              resData = resData.data;
              data.userId = resData.userId,
              data.userNickname = resData.userNickname;
              data.userTelephone = resData.userTelephone;
              data.userEmail = resData.userEmail;
              data.authority = resData.teacher == true?'老师':'学生';
            }else{
              alert(resData.errMsg);
            }
            data.loading = false;
          })
      }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 800px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
